import { Component, OnInit } from '@angular/core';

import { openCloed, insertRemove, flyInOut, slider, mykeyframes } from '../animation/transion.animation';


@Component({
  selector: 'app-transion-trigger',
  templateUrl: './transion-trigger.component.html',
  styleUrls: ['./transion-trigger.component.scss'],
  animations: [
    openCloed,
    insertRemove,
    flyInOut,
    slider,
    mykeyframes
  ]
})
export class TransionTriggerComponent implements OnInit {

  isOpen: boolean = false;
  isShown: boolean = false;
  isActive: boolean = false;

  isIncrement: boolean =false;
  selectedIndex: number = 0;

  private _images: string[] = ['https://via.placeholder.com/400x400?text=Hello',
    'https://via.placeholder.com/400x400?text=Angular',
    'https://via.placeholder.com/400x400?text=Animations'
  ];

  constructor() { }

  ngOnInit() {
  }

  toggle(){
    this.isOpen = !this.isOpen;
  }

  get images() {
    return [this._images[this.selectedIndex]];
  }

  previous() {
    this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
  }

  next() {
    this.selectedIndex = Math.min(this.selectedIndex + 1, this._images.length - 1);
  }
}
